import React, { useEffect, useState } from 'react';
import jiaohu1 from '@/config/img/jiaohu1.png';
import jiaohu2 from '@/config/img/jiaohu2.png';
import jiaohu3 from '@/config/img/jiaohu3.png';
import './index.less';
import { CSSTransition } from 'react-transition-group';

export default function index() {
  const [isVisible, setIsVisible] = useState(false);

  const funList = [
    {
      title: '雷剧拼图',
      src: jiaohu1,
      details:
        '交互简介：通过将人物妆容与我们熟悉的拼图想结合，拼成会有意外之喜哦！',
    },
    {
      title: '石狗保卫战',
      src: jiaohu3,
      details: '交互简介:坏蛋要来了，你要一起保卫雷州石狗吗',
    },
    {
      title: '服饰消消乐',
      src: jiaohu2,
      details:
        '交互简介:通过将人物妆容与我们熟悉的拼图相结合，拼成会有意外之喜哦!',
    },
  ];
  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
    }, 1050);
  }, []);
  return (
    <CSSTransition
      in={isVisible} // 控制动画是否开始，true 表示开始动画
      timeout={5000} // 动画过渡的时间，单位毫秒
      classNames="fade" // 指定动画的 class 名称
      unmountOnExit // 动画退出时卸载组件
    >
      <div className="fun-inter">
        <div className="fun-iter-title">
          <div className="title-tet">交互小游戏</div>
        </div>
        <div className="fun-iter-content">
          {funList.map((val) => {
            return (
              <div className="fun-iter-item">
                <div className="fun-item-left">
                  <img src={val.src} alt="" />
                  <div className="item-title">{val.title}</div>
                </div>
                <div className="fun-item-right">
                  <div className="item-details">{val.details}</div>
                </div>
                <div className="button">
                  <div className="button-text">点击进入</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </CSSTransition>
  );
}
